<script setup>
import {instance} from './single.js'
import {computed, ref} from 'vue'
import wavy from './wavy.vue';

const isPlaying = ref(false)
const props = defineProps({
    url: String,
    time: [String, Number],
    size: {
        type: Boolean,
        default: false,
    }
})

function play() {
    if(!props.url) return
    if(isPlaying.value) return instance.stop()
    instance.stop()
    instance.once('over', () => isPlaying.value = false)
    isPlaying.value = true
    instance.play(props.url)
}
function stop() {
    if(isPlaying.value) {
        isPlaying.value = false
        instance.stop()
    }
}
const width = computed(() => {
    if(props.size) {
        return props.time / 60 * 100 + 'px'
    }
    return ''
})

defineExpose({stop})
</script>

<template>
    <div class="c-webrtc-audio" @click="play">
        <div>
            <wavy :class="{stop: !isPlaying}"></wavy>
        </div>
        <div>
            {{ props.time }}s
        </div>
        <div :style="{width:width}"></div>
    </div>
</template>